<template>
	<view class="Tabber">
		<van-tabbar :active="pageNameActive" @change="tabPage" active-color="#0180FF" inactive-color="#666666"
			placeholder="true" z-index="1000">
			<van-tabbar-item name="home">
				<image slot="icon" :src="pageIconPath.home" mode="aspectFit" class="tabberIcon" />
				<image slot="icon-active" :src="pageIconPath.homeActive" mode="aspectFit" class="tabberIcon" />
				首页
			</van-tabbar-item>
			<van-tabbar-item name="serve">
				<image slot="icon" :src="pageIconPath.serve" mode="aspectFit" class="tabberIcon w44" />
				<image slot="icon-active" :src="pageIconPath.serveActive" mode="aspectFit" class="tabberIcon w44" />
				服务
			</van-tabbar-item>
			<van-tabbar-item name="message" :dot="isShow">
				<image slot="icon" :src="pageIconPath.message" mode="aspectFit" class="tabberIcon2" />
				<image slot="icon-active" :src="pageIconPath.messageActive" mode="aspectFit" class="tabberIcon2" />
				消息
			</van-tabbar-item>
			<van-tabbar-item name="user">
				<image slot="icon" :src="pageIconPath.user" mode="aspectFit" class="tabberIcon2" />
				<image slot="icon-active" :src="pageIconPath.userActive" mode="aspectFit" class="tabberIcon2" />
				我的
			</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				isShow:false,
				pageNameActive: 'home',
				pageIconPath: {
					home: '/static/home.png',
					homeActive: '/static/homeSelect.png',
					serve: '/static/service.png',
					serveActive: '/static/serveSelect.png',
					message: '/static/message.png',
					messageActive: '/static/messageSelect.png',
					user: '/static/user.png',
					userActive: '/static/userSelect.png',
				},
				pagePath: {
					home: "/pages/web/home/home",
					serve: "/pages/web/service/index",
					message: "/pages/web/message/xiaoxiList",
					user: "/pages/ucenter/user",
				}
			}
		},
		props: {
			currentPagePath: String,
			default: 'home'
		},
		onReady() {
			this.$data.pageNameActive = this.$props.currentPagePath;
		},
		methods: {
			tabPage(e) {
				// if(this.youkeType && !this.pagePath[e].includes('/home')){
				// 	uni.redirectTo({
				// 		url:"/pagesroot/login/login"
				// 	})
				// 	return;
				// }
				
				
				if(this.youkeType && this.pagePath[e].includes('/home')){
					uni.redirectTo({
						url: "/pages/youke/web/home/home"
					});
				}else{
					uni.redirectTo({
						url: this.pagePath[e]
					});
				}
			}
		},
		computed:{
			...mapState(['isMessage','youkeType'])
		},
		watch:{
			isMessage:{
				immediate:true,
				handler(val){
					this.isShow = val;
				}
			}
		}
	}
</script>

<style>
	.Tabber {
		width: 100%;
		height: auto;
	}

	.tabberIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.w44 {
		width: 44rpx;
	}

	.tabberIcon2 {
		width: 39rpx;
		height: 39rpx;
	}
</style>